<template>
  <div>
    <!-- 顶部导航栏 -->
    <div class='tab-bar'>
      <div v-for="item in category" :key="item.id" :class="[item.id===0?'active':'']" @click="getphotosList(item.id)">{{item.title}}</div>
    </div>
    <!-- 图片列表区 -->
    <ul class="photo-list">
      <router-link v-for="item in list" :key='item.id' :to="'/home/images/imginfo/'+item.id" tag="li">
        <img v-lazy="item.img_url">
        <div class="info">
          <div class="info-titel">{{item.title}}</div>
          <div class="info-body">{{item.abstract}}</div>
        </div>
      </router-link>
</ul>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data(){
    return{
      category:[],
      list:[]
    }
  },
  created(){
     this.getimgcategory();
     this.getphotosList(0)
  },
  mounted(){
 
  },
  methods:{
    getimgcategory(){
      axios.get("api/getimgcategory").then(res=>{
        if(res.data.status===0){
          this.category=res.data.messages;
        }
      })
    },
    getphotosList(cateId){
      axios.get("api/getimages/:"+cateId).then(res=>{
        this.list=res.data.message
      })
    }
    
  },
  directives:{
    "color":function(el){
      el.style.color='#007aff'
    }
  }
}
</script>

<style lang="less" scoped>
.tab-bar{
  display:flex;
  padding: 10px 5px;
  div{
    flex:1;
    text-align: center;
  }
  div:hover{
    color: #007aff;
  }
  .active{
    color:#007aff;
  }
}
.photo-list{
  list-style: none;
  padding: 10px;
  padding-bottom: 0;
  margin: 0;
  li{
    background-color: #ccc;
    padding-bottom: 10px;
    text-align: center;
    box-shadow: 0 0 9px #999;
    position: relative;
    img{
      width: 100%;
      vertical-align:middle;
    }
    img[lazy=loading] {
    width: 40px;
    height: 300px;
    margin: auto;
  }
  .info{
    background-color:rgba(0,0,0,0.3);
    color: #fff;
    height: 150px;
    width: 100%;
    overflow: hidden;
    position: absolute;
    bottom: 10px;
    .info-titel{
      text-align: left;
      font-size: 15px;
      font-weight: 700;
    }
    .info-body{
      font-size: 14px;
      line-height: 24px;
      padding: 5px 13px;
    }
  }
}
}
</style>